<template>
  <div>
    <van-nav-bar title="商品销量统计" left-text="返回" left-arrow v-back />
    <div class="finance-container">
      <finance-date-choose @dateChange="dateChange"></finance-date-choose>
      <div class="finance-content">
        <div class="finance-content__tit">
          <van-icon name="hot-o"></van-icon>
          商品销量TOP10
        </div>
        <chart :height="'400px'" :id="'productSellChart'" :option="option"></chart>
      </div>
      <div class="finance-content">
        <div class="finance-content__tit">
          <van-icon name="hot-o"></van-icon>
          商品销售额占比TOP10
        </div>
        <chart :height="'240px'" :id="'productCostChart'" :option="pieOption"></chart>
      </div>
    </div>

  </div>
</template>

<script>
  import FinanceDateChoose from '@/components/FinanceDateChoose'
  import Chart from '@/components/Chart'
  import line from 'echarts/lib/chart/pictorialBar'
  import {PRODUCT_SELL_COUNT} from '@/api/finance'
  import {mapState} from 'vuex';

  export default {
    components: {
      FinanceDateChoose,
      Chart
    },
    computed: {
      ...mapState(['stationInfo'])
    },
    data() {
      return {
        searchDate: new Date().Format('yyyy'),
        searchDateType: 'year',
        option: {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "none"
            }
          },
          grid: {
            top: "5%",
            bottom: "5%",
            left: "3%",
            right: "5%",
            containLabel: true
          },
          xAxis: {
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff"
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            },
          },
          yAxis: {
            data: [],
            splitLine: {
              show: false,
            },
            axisLabel: {
              textStyle: {
                color: "#333"
              },
              interval: 0
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          series: {
            type: "bar",
            barWidth: '15px',
            itemStyle: {
              normal: {
                opacity: 0.7,
                color: function (params) {
                  var colorList = ['#00a0e9', '#fcd20b', '#ea4c89', '#a4bb5a', '#f77f00', '#a4c639',
                    '#a086d3', '#008fd5', '#e2be5e', '#c1d749', '#49d7a6', '#18c3d1', '#db7132', '#6a8b80',
                    '#18c3d1'
                  ];
                  return colorList[params.dataIndex];
                }
              },
              emphasis: {
                opacity: 1
              }
            },
            label: {
              normal: {
                show: true,
                position: 'right'
              }
            },
            data: [],
            z: 10
          }
        },
        pieOption: {
          color: ['#00a0e9', '#fcd20b', '#ea4c89', '#a4bb5a', '#f77f00', '#a4c639',
            '#a086d3', '#008fd5'
          ],
          tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b}: {c} ({d}%)"
          },
          series: {
            name: '本厂水销量占比',
            type: 'pie',
            radius: ['0%', '45%'],
            roseType: 'radius',
            label: {
              formatter: '{b}: {@2012}'
            },
            labelLine: {
              length: 4,
              length2: 4
            },
            data: []
          }
        }
      }
    },
    mounted(){
      this.getData();
    },
    methods: {
      getData(){
        this.$reqGet(PRODUCT_SELL_COUNT, {
          stationId: this.stationInfo.id,
            dateType: this.searchDateType,
            date: this.searchDate
        }).then(res => {
          if(res.code == 200){
            let seriesName = [], sellCount = [], pieData = [];

            if(res.rows.length == 0){
              this.$toast('暂无数据');
            }
            res.rows.forEach(el => {
              seriesName.push(el.waterName);
              sellCount.push(el.num);
              pieData.push({
                name: el.waterName,
                value: el.sum
              });
            });
            this.option.series.data = sellCount;
            this.option.yAxis.data = seriesName;
            this.pieOption.series.data = pieData;
          }
        })
      },
      dateChange(info){
        this.searchDate = info.date;
        this.searchDateType = info.type;
        this.getData();
      }
    }
  }

</script>

<style>

</style>
